<template>
  <div class="todo-list">
    <transition-group name="fade" tag="div">
      <todo-item
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @toggle="$emit('toggle', todo.id)"
        @delete="$emit('delete', todo.id)"
      />
    </transition-group>
    <div v-if="!todos.length" class="empty">
      <el-icon><Box /></el-icon>
      <span>暂无待办事项</span>
    </div>
  </div>
</template>

<script setup>
import TodoItem from './TodoItem.vue'
import { Box } from '@element-plus/icons-vue'
const props = defineProps({
  todos: Array
})
</script>

<style scoped>
.todo-list {
  min-height: 120px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 0 8px 0;
  transition: background var(--transition);
}
.empty {
  color: #bbb;
  text-align: center;
  padding: 32px 0 16px 0;
  font-size: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.fade-enter-active, .fade-leave-active {
  transition: all 0.4s var(--transition);
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style> 